<template>
	<view>
		
		
		<!-- 顶部选项卡 -->
		<scroll-view scroll-x class="scroll-row font-md border-bottom border-light-secondary" :scroll-into-view="scrollInto" scroll-with-animation=""style="100rpx">
			<view v-for="(item,index) in tabBars" :key="index" class="scroll-row-item px-5 py-2" :id="'tab'+index" :class="tabIndex===index?'text-main font-lg font-weight-bold':''" @click="changTab(index)">{{item.name}}</view>
		</scroll-view>		
		
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px;'">
			<swiper-item v-for="(item,index) in newsList" :key="index">
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
					<template v-if="item.list.length >0">
						<block v-for="(item2,index2) in item.list" :key="index2">
							<!-- 列表 -->
						 
						 <topic-list :item="item2" :index="index2" ></topic-list>
						
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<!-- 无数据 -->
					<template v-else>
						<no-thing></no-thing>
					      
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		    
	</view>
</template>

<script>
	const demo=[{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				},
				{
					cover:"/static/demo/topicpic/1.jpeg",
					title:"话题名称",
					desc:"话题描述",
					today_count:0,
					news_count:10
				}]
	import topicList from "@/components/news/topic-list.vue";
	import loadMore from "@/components/common/load-more.vue";
	export default {
		components:{
			topicList,
			loadMore
		},
		data() {
			return {
				scrollH:600,
				// 顶部选项卡
				scrollInto:"",
				tabIndex:0,
				tabBars:[{
					name:"关注"
				},
				{
					name:"推荐"
				},
				{
					name:"体育"
				},
				{
					name:"热点"
				},
				{
					name:"财经"
				}
				],
				newsList:[]
			}
		},
		
		onLoad() {
                 uni.getSystemInfo({
					 success:res=>{
						 this.scrollH=res.windowHeight-uni.upx2px(100)
					 }
				 })
				 //根据选项生成列表
				 this.getData()
		},
		methods: {
			//监听点击导航栏搜索框
			navigateTosearch(search){
				uni.navigateTo({
					url:'../search/search',
				})
			},
			
			//跳转发帖页面
			navigateToaddinput(addInput){
					uni.navigateTo({
						url:'../add-input/add-input',
					})
			},
			//获取数据
			getData(){
				
				var arr=[]
				for(let i=0;i<this.tabBars.length;i++){
					//生成列表模板
					let obj={
						//1.上拉加载更多 2.加载中... 3.没有更多了...
						loadmore:"上拉加载更多",
						list:[]
					}
					if(i<3){
						obj.list=demo
					}
					arr.push(obj)
				}
				this.newsList=arr
			},
			//监听滑动
			onChangeTab(e){
				this.changTab(e.detail.current)
			},
			//切换选项
			changTab(index){
				if(this.tabIndex===index)
				{
					return;
				}
				this.tabIndex=index
				//滚动到指定元素
				this.scrollInto='tab'+index
			},
			// 关注
              follow(e){
				  this.newsList[e].isFollow=true
				  uni.showToast({
				  	title:"关注成功",
					
				  })
			  },
			  //顶踩
			  dosupport(e){
				   let item=this.newsList[0].list[e.index]
				   let msg = e.type==='support'?'顶':'踩'
				  //之前没操作过
				  if(item.support.type==='')
				  {
				  item.support.type=e.type
				  item.support[e.type+'_count']++
				  }
				  else if(item.support.type==='support' && e.type==='unsupport')
				  {
					  item.support.support_count--;
					  item.support.unsupport_count++;
				  }
				  else if(item.support.type==='unsupport'&& e.type==='support')
				  {
					  item.support.support_count++;
					  item.support.unsupport_count--;
				  }
				  item.support.type=e.type
				 uni.showToast({
					 title:msg
					 
				 })
				 
			  },
			  //上拉加载更多
			  loadmore(index){
				  
				  let item=this.newsList[index]
				  //判断是否处于可加载状态（上拉加载更多）
				  if(item.loadmore!=='上拉加载更多')return;
				  //修改当前列表的加载状态
				  item.loadmore="加载中..."
				  
				  //模拟数字请求
				  setTimeout(()=>{
					  //加载数据
					  item.list=[...item.list,...item.list]
					  //恢复加载状态
					   item.loadmore="上拉加载更多"
				  },4000)
			  }
 
		}
	}
</script>

<style>
	.weui-icon-search_in-box1{
		position: absolute;
		left: 11px;
		top: 7px;
	}
	.weui-search-bar {
	  position: relative;
	  padding: 8px 10px;
	  display: -webkit-box;
	  display: -webkit-flex;
	  display: flex;
	  box-sizing: border-box;
	  background-color: #EFEFF4;
	  border-top: 1rpx solid #D7D6DC;
	  border-bottom: 1rpx solid #D7D6DC;
	}
	.weui-icon-search_in-box {
	  position: absolute;
	  right: 11px;
	  top: 7px;
	}
	.weui-search-bar__form {
	  position: relative;
	  -webkit-box-flex: 1;
	  -webkit-flex: auto;
	          flex: auto;
	  border-radius: 5px;
	  background: #FFFFFF;
	  border: 1rpx solid #E6E6EA;
	}
	.weui-search-bar__box {
	  position: relative;
	  padding-left: 30px;
	  padding-right: 30px;
	  width: 100%;
	  box-sizing: border-box;
	  z-index: 1;
	}
	.weui-search-bar__input {
	  height: 28px;
	  line-height: 28px;
	  font-size: 14px;
	}
	.weui-search-bar__cancel-btn {
	  margin-left: 10px;
	  line-height: 28px;
	  color: #1296db;
	  white-space: nowrap;
	}
	
</style>
